<template>
  <div class="editor-container" :style="{ width }">
    <Toolbar :editor="editorRef" :mode="mode" />
    <Editor :mode="mode" :defaultConfig="state.editorConfig" :style="{ height }" v-model="state.editorVal" style="border-top: 1px solid #ccc "
            @onCreated="handleCreated" @onChange="handleChange" />
  </div>
</template>

<script setup lang="ts" name="wngEditor">
import '@wangeditor/editor/dist/css/style.css';
import { reactive, shallowRef, watch, onBeforeUnmount } from 'vue';
import {IDomEditor, type IEditorConfig} from '@wangeditor/editor';
import { Toolbar, Editor } from '@wangeditor/editor-for-vue';
import {uploadAndPreview} from "@/api/common";

// 定义父组件传过来的值
const props = defineProps({
  // 是否禁用
  disable: {
    type: Boolean,
    default: () => false,
  },
  // 内容框默认 placeholder
  placeholder: {
    type: String
  },
  mode: {
    type: String,
    default: () => 'simple',
  },
  // 高度
  height: {
    type: String,
    default: () => '310px',
  },
  // 宽度
  width: {
    type: String,
    default: () => '80%',
  },
  // 双向绑定，用于获取 editor.getHtml()
  getHtml: String,
  // 双向绑定，用于获取 editor.getText()
  getText: String,
});

// 定义子组件向父组件传值/事件
const emit = defineEmits(['update:getHtml', 'update:getText']);
type InsertFnType = (url: string, alt: string, href: string) => void;

// 定义变量内容
const editorRef = shallowRef();
const state = reactive({
  editorConfig: {
    placeholder: props.placeholder,
    MENU_CONF:[]
  },
  editorVal: props.getHtml,
});
state.editorConfig.MENU_CONF["uploadImage"]= {
  // 自定义上传
  async customUpload(file: File, insertFn: InsertFnType) {
    // file 即选中的文件
    console.log("自定义上传", file);
    // 自己实现上传，并得到图片 url alt href
    const formData = new FormData();
    formData.append("file", file, file?.name);
    // 上传接口
    const res = await uploadAndPreview(formData);
    // 最后插入图片
    insertFn(res.data, "", "");
  },
}
// 编辑器回调函数
const handleCreated = (editor: IDomEditor) => {
  editorRef.value = editor;
  // 监听是否禁用改变
  props.disable ? editorRef.value.disable() : editorRef.value.enable();
};
// 编辑器内容改变时
const handleChange = (editor: IDomEditor) => {
  emit('update:getHtml', editor.getHtml());
  emit('update:getText', editor.getText());
};
// 页面销毁时
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

// 监听双向绑定值改变，用于回显
watch(
    () => props.getHtml,
    (val) => {
      state.editorVal = val;
    },
    {
      deep: true,
    }
);
</script>
<style scoped lang="scss">
.editor-container{
  border: 1px solid #ccc;
}
</style>